<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>元素关系</title>
    </head>
    <body>

        <h3>元素关系</h3>

        <form action="http://www.baidu.com/s" 
              method="get" 
              enctype="application/x-www-form-urlencoded"
              target="_blank" >
            <input type="text" name="wd" >
            <input type="submit" value="百度一下">
        </form>

        <hr>

        <div>
            <button type="button" id="first" >获取父元素、子元素、兄弟元素</button>
            <button type="button" class="second" >访问元素的属性</button>
            <button type="button" class="third" >判断表单元素是否包含id属性</button>
        </div>

        <script type="text/javascript">

            function bind( selector , listener ){
                // 根据参数所传入的选择器选择匹配该选择器的元素
                let e = document.querySelector( selector ); // 注意不要把 selector 写成 'selector'
                // 为 e 所指向的元素绑定 鼠标左键单击事件 监听器
                e.addEventListener( 'click' , listener , false );
            }

            bind( '#first' , ()=> {

                let f = document.querySelector( 'form' );

                let parent = f.parentElement ; // 获取父元素
                console.log( parent );

                // 若自己的子元素个数大于零
                if( f.childElementCount > 0 ){
                    let childs = f.children;
                    console.log( childs );
                }

                // previousElementSibling 获取的是前一个元素
                console.log( f.previousElementSibling );

                console.log( f.nextElementSibling );

            });

            bind( '.second' , () => {
                let f = document.querySelector( 'form' );

                // 一定要注意 hasAttributes 是个属性
                if( f.hasAttributes ){ // 判断元素是否存在属性
                    let attrs = f.attributes ; // 获得所有属性
                    console.log( attrs );
                    let array = Array.from( attrs );
                    array.forEach( x => { 
                        // 每个属性都是Attr类的实例 ( Attr类是Node类的子类 )
                        console.log( x.nodeType === Node.ATTRIBUTE_NODE , x instanceof Node);
                        console.log( x.nodeType , x.nodeName , x.nodeValue ) ;
                    });
                }

                console.log( '- - - '.repeat(5) );

                // 获得某个元素所有的属性名组成的数组
                let attrNames = f.getAttributeNames();
                attrNames.forEach( x => {
                    let value = f.getAttribute( x ); // 根据属性名获得指定属性的值
                    console.log( x , value );
                });
            } );

            bind( '.third' , ()=>{
                let f = document.querySelector( 'form' );
                // 若 f 所指向的元素没有 id 属性
                if( !f.hasAttribute( 'id' ) ) {
                    // 添加属性 或 修改已存在的属性值
                    f.setAttribute( 'id' , 'baidu' );
                }
                console.log( f.hasAttribute( 'class' ) );
                console.log( f.hasAttribute( 'action' ) );
            });
        </script>
        
    </body>
</html>